<template>
  <div class="mb-dialog" @click="(e) => e.stopPropagation()">
    <el-scrollbar style="height: calc(100vh - 120px)">
      <div class="set-btn">
        <i @click="handleClose">
          <ul class="set-dialog" v-show="setShow" @click="(e) => e.stopPropagation()">
            <li>
              前进
              <el-input-number
                size="mini"
                controls-position="right"
                placeholder="0.1-1.2m/s"
                :step="0.1"
                :min="0.1"
                :max="1.2"
                v-model="qianj"
              ></el-input-number>
            </li>
            <li>
              后退
              <el-input-number
                size="mini"
                controls-position="right"
                placeholder="0.1-1.2m/s"
                :step="0.1"
                :min="0.1"
                :max="1.2"
                v-model="hout"
              ></el-input-number>
            </li>
            <li>
              左转
              <el-input-number
                size="mini"
                controls-position="right"
                placeholder="0.1-1.2m/s"
                :step="0.1"
                :min="0.1"
                :max="1"
                v-model="zouz"
              ></el-input-number>
            </li>
            <li>
              右转
              <el-input-number
                size="mini"
                controls-position="right"
                placeholder="0.1-1.2m/s"
                :step="0.1"
                :min="0.1"
                :max="1"
                v-model="youz"
              ></el-input-number>
            </li>
            <li>
              上升
              <el-input-number
                size="mini"
                controls-position="right"
                :min="1"
                :max="5"
                :step="1"
                v-model="shangs"
              ></el-input-number>
            </li>
            <li>
              下降
              <el-input-number
                size="mini"
                controls-position="right"
                :min="1"
                :max="5"
                :step="1"
                v-model="xiaj"
              ></el-input-number>
            </li>
          </ul>
          <div class="set-jt" v-if="setShow"></div>
        </i>
        <div class="video-title">机器人车体控制</div>
      </div>
      <div class="kej-wrapper" style="align-items: center; justify-content: center">
        <div class="kej-left" style="margin-right: 30px">
          <i class="shang shang1" title="前进" @click="visibleCamera(2, 1, false, qianj + 'm/s')"></i>
          <div>
            <i class="zou zou1" title="左转" @click="visibleCamera(2, 3, false, zouz + 'm/s')"></i>
            <i class="zhong" title="停止" @click="visibleCamera(2, 6)"></i>
            <i class="you you1" title="右转" @click="visibleCamera(2, 4, false, youz + 'm/s')"></i>
          </div>
          <i class="xia xia1" title="后退" @mousedown="visibleCamera(2, 2, false, hout + 'm/s')"></i>
        </div>
        <ul class="shangx-btn">
          <li title="上升" @click="visibleCamera(2, 7, false, shangs)"><i></i></li>
          <li>
            <div></div>
          </li>
          <li title="下降" @click="visibleCamera(2, 8, false, xiaj)"><i></i></li>
        </ul>
      </div>
      <div class="yt-title">
        <div class="video-title" style="margin-right: 115px">机器人云台</div>
        <el-select size="mini" placeholder="预置位调用" v-model="preset" @change="visibleCamera(3, 7, false, preset)">
          <el-option v-for="item in presetList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>
      <div class="kej-wrapper" style="align-items: center; justify-content: center">
        <div class="kej-left" style="margin-right: 30px">
          <i class="shang shang1" title="上仰" @click="visibleCamera(3, 1)"></i>
          <div>
            <i class="zou zou1" title="左转" @click="visibleCamera(3, 3)"></i>
            <i class="zhong" title="停止" @click="visibleCamera(3, 8)"></i>
            <i class="you you1" title="右转" @click="visibleCamera(3, 4)"></i>
          </div>
          <i class="xia xia1" title="下俯" @click="visibleCamera(3, 2)"></i>
        </div>
        <ul class="shangx-btn" style="margin-right: 20px">
          <li title="上升" @click="visibleCamera(3, 5)"><i></i></li>
          <li>
            <div></div>
          </li>
          <li title="下降" @click="visibleCamera(3, 6)"><i></i></li>
        </ul>
        <div class="fw-btn" @click="visibleCamera(3, 9)"><i></i>复位</div>
      </div>
      <div class="video-title">可见光摄像头</div>
      <div class="kej-wrapper">
        <div class="kej-left">
          <i class="shang" title="镜头拉近" @click="visibleCamera(21, 1)"></i>
          <div>
            <i class="zou" title="焦距增加" @click="visibleCamera(21, 4)"></i>
            <i class="zhong" title="停止" @click="visibleCamera(21, 3)"></i>
            <i class="you" title="焦距减少" @click="visibleCamera(21, 5)"></i>
          </div>
          <i class="xia" title="镜头拉远" @click="visibleCamera(21, 2)"></i>
        </div>
        <ul class="kej-btn">
          <li @click="visibleCamera(21, 6)"><i></i><span>自动聚焦</span></li>
          <li @click="visibleCamera(21, 8)"><i></i><span>重启</span></li>
          <li @click="visibleCamera(21, 7)"><i></i><span>抓图</span></li>
          <li>
            <el-popover placement="top" width="100" trigger="hover">
              <el-input-number
                size="mini"
                controls-position="right"
                :min="10"
                :max="600"
                v-model="lxTime"
                style="width: 100%"
              ></el-input-number>
              <div @click="visibleCamera(21, startFlag ? 10 : 9, false, startFlag ? '' : lxTime)" slot="reference">
                <i></i>
                <span>{{ startFlag ? '停止录像' : '启动录像' }}</span>
              </div>
            </el-popover>
          </li>
          <li>
            倍率值设置<br />
            <el-input-number
              v-model="videoRate"
              size="mini"
              controls-position="right"
              :min="1"
              :max="30"
              @change="visibleCamera(21, 11, false, videoRate)"
            ></el-input-number>
          </li>
          <li>
            聚焦值设置<br />
            <el-input-number
              v-model="videoFocus"
              size="mini"
              :precision="0"
              controls-position="right"
              :min="1"
              @change="visibleCamera(21, 12, false, videoFocus)"
            ></el-input-number>
          </li>
        </ul>
      </div>
      <div class="video-title">红外热像仪</div>
      <div class="kej-wrapper">
        <ul class="kej-btn">
          <li @click="visibleCamera(22, 6)"><i></i><span>自动聚焦</span></li>
          <li @click="visibleCamera(22, 8)"><i></i><span>重启</span></li>
          <li @click="visibleCamera(22, 7)"><i></i><span>抓图</span></li>
          <li>
            聚焦值设置
            <el-input-number
              v-model="redFocus"
              size="mini"
              :precision="0"
              controls-position="right"
              :min="1"
              @change="visibleCamera(22, 5, false, redFocus)"
            ></el-input-number>
          </li>
        </ul>
      </div>
      <div class="video-title">局放传感器</div>
      <div class="juf-btn">
        <ul class="shangx-btn" style="margin-right: 20px; display: flex">
          <li @click="visibleCamera(23, 2)" style="width: 25px; height: 31px">
            <i style="transform: rotate(-90deg)" title="收缩"></i
          ></li>
          <li style="width: 63px; height: 31px">
            <div style="width: 50px; height: 20px"></div>
          </li>
          <li @click="visibleCamera(23, 1)" style="width: 25px; height: 31px">
            <i style="transform: rotate(-90deg)" title="伸长"></i>
          </li>
        </ul>
        <ul class="juf-caoz">
          <li @click="visibleCamera(23, 4)"><i></i>复位</li>
          <li @click="visibleCamera(23, 3)"><i></i>停止</li>
        </ul>
      </div>
      <div class="video-title">机器人辅助设备</div>
      <ul class="device-btn">
        <li
          >红外电源
          <el-switch active-color="#1DD4E7" v-model="hongw" @change="visibleCamera(4, 1, false, hongw ? 1 : 2)" />
        </li>
        <li
          >雨刮
          <el-switch active-color="#1DD4E7" v-model="yug" @change="visibleCamera(4, 2, false, yug ? 1 : 2)" />
        </li>
        <li
          >超声
          <el-switch active-color="#1DD4E7" v-model="chaos" @change="visibleCamera(4, 3, false, chaos ? 1 : 2)" />
        </li>
        <li
          >红外射灯
          <el-switch active-color="#1DD4E7" v-model="hwsd" @change="visibleCamera(4, 4, false, hwsd ? 1 : 2)" />
        </li>
        <li
          >辅助照明
          <el-switch active-color="#1DD4E7" v-model="fzzm" @change="visibleCamera(4, 5, false, fzzm ? 1 : 2)" />
        </li>
        <li></li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<script>
  // import { mapGetters } from 'vuex';
  import commonData from '@/api/commonData';

  export default {
    name: 'RobotControlDia',
    props: {
      setShow: {
        type: Boolean,
        default: false
      },
      controlMode: {
        type: String,
        default: ''
      },
      robot: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        videoRate: '',
        videoFocus: '',
        redFocus: '',
        lxTime: 10,
        hongw: false,
        yug: false,
        chaos: false,
        hwsd: false,
        fzzm: false,
        preset: '',
        qianj: '',
        hout: '',
        zouz: '',
        youz: '',
        shangs: '',
        xiaj: '',
        presetList: [],
        formCode: {},
        startFlag: false
      };
    },
    computed: {
      stationInfo() {
        return this.$store.state.station.stationInfo;
      }
      // ...mapGetters({
      //   checkPassword: 'surety/checkPassword'
      // })
    },
    created() {
      for (let i = 0; i <= 255; i++) {
        this.presetList.push({
          label: '预置位' + i,
          value: i
        });
      }
    },
    methods: {
      handleClose() {
        this.$emit('handleClose');
      },
      // 机器人本体 机器人车体 机器人云台 可见关摄像机 机器人辅助设备
      async visibleCamera(type, command, bool = false, value) {
        console.log(value, 'value');
        // if (!this.controlBool && !(command === 6 && type ===1)) return this.$alert('请点击控制模式或获取控制权', '消息提醒');
        if (type === 21 && (command === 9 || command === 10)) this.startFlag = !this.startFlag;
        if (type === 21 && command === 9) {
          setTimeout(() => {
            this.handleControl(false, type, 10);
          }, this.lxTime * 1000);
        }
        this.formCode.value = value;
        if (command === 5 && type === 1) this.formCode.value = this.controlMode;
        if (!this.robot) return this.$alert('请选择机器人', '消息提醒');
        this.formCode.type = type;
        this.formCode.command = command;
        this.formCode.stationCode = this.stationInfo.stationCode;
        this.formCode.patroldeviceCode = this.robot;
        this.handlerAuth(this.handleControl, bool);
      },
      async handleControl(bool, type, command) {
        if (type === 21 && command === 10) {
          this.formCode.value = '';
          this.formCode.command = 10;
        }
        let res = await commonData.getReceive('/inspect/robot-ctrl/control', this.formCode, this.autPassword);
        if (res.code === 200) {
          if (type === 21 && command === 10) this.startFlag = false;
          this.$message.success('操作成功');
          if (bool) {
            this.controlBool = false;
            this.$alert(res.data, '消息提醒');
          } else {
            this.controlBool = true;
          }
        } else {
          this.autPassword = '';
          this.controlBool = false;
          // this.$alert('该指令未开放控制权', '消息提醒')
        }
      },
      handlerAuth(callbackFn, ...args) {
        if (this.checkPassword) {
          // if (this.autPassword) {
          //   callbackFn(...args)
          // } else {
          this.$authDialog({
            confirm: (value) => {
              this.autPassword = value;
              callbackFn(...args);
            },
            close: () => {
              console.log('close------=-=-=-');
            }
          });
          // }
        } else {
          callbackFn(...args);
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .set-btn {
    position: relative;
    i {
      position: absolute;
      top: 3px;
      left: 0;
      display: block;
      width: 18px;
      height: 18px;
      background: url('../../../../../assets/robot/set.png') no-repeat center center/100% 100%;
    }
    .set-dialog {
      width: 160px;
      position: absolute;
      top: 26px;
      left: 0;
      background: rgba(20, 20, 20, 0.7);
      padding: 10px;
      z-index: 9;
      li {
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        line-height: 17px;
        .el-input-number {
          width: 100px;
          margin-left: 8px;
        }
      }
      li + li {
        margin-top: 10px;
      }
    }
    .set-jt {
      top: 23px;
      left: 5px;
      background: rgba(20, 20, 20, 0.7);
      position: absolute;
      width: 8px;
      height: 8px;
      transform: rotate(45deg);
    }
  }
  .yt-title {
    position: relative;
    .el-select {
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
    }
  }
  .mb-dialog {
    width: 358px;
    padding: 10px 15px;
    position: absolute;
    bottom: -53px;
    left: -366px;
    background: linear-gradient(90deg, #014baf 0%, #01122b 100%);
    border: 1px solid;
    border-image: linear-gradient(270deg, rgba(227, 245, 255, 0.6), rgba(205, 238, 255, 0.8), rgba(97, 201, 255, 0.8)) 1
      1;
    .kej-wrapper {
      border-bottom: 1px solid;
      border-image: linear-gradient(270deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.7)) 1 1;
      margin-bottom: 10px;
      padding-bottom: 10px;
      display: flex;
      .kej-left {
        width: 120px;
        height: 120px;
        background: url('../../../../../assets/robot/kuang.png') no-repeat center center/100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 11px;
        div {
          height: 26px;
        }
        i {
          display: inline-block;
        }
        .shang {
          width: 26px;
          height: 35px;
          background: url('../../../../../assets/robot/shang.png') no-repeat center center/100% 100%;
        }
        .shang.shang1 {
          background: url('../../../../../assets/robot/shang1.png') no-repeat center center/100% 100%;
        }
        .zou {
          width: 35px;
          height: 26px;
          background: url('../../../../../assets/robot/left.png') no-repeat center center/100% 100%;
        }
        .zou.zou1 {
          background: url('../../../../../assets/robot/zou1.png') no-repeat center center/100% 100%;
        }
        .zhong {
          width: 20px;
          height: 20px;
          background: url('../../../../../assets/robot/zhong.png') no-repeat center center/100% 100%;
          margin: 2px;
        }
        .you {
          width: 35px;
          height: 26px;
          background: url('../../../../../assets/robot/you.png') no-repeat center center/100% 100%;
        }
        .you.you1 {
          background: url('../../../../../assets/robot/you1.png') no-repeat center center/100% 100%;
        }
        .xia {
          width: 26px;
          height: 35px;
          background: url('../../../../../assets/robot/xia.png') no-repeat center center/100% 100%;
        }
        .xia.xia1 {
          background: url('../../../../../assets/robot/xia1.png') no-repeat center center/100% 100%;
        }
      }
      .kej-btn {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        height: 100%;
        li {
          width: 50%;
          text-align: left;
          font-weight: 500;
          font-size: 12px;
          color: #ffffff;
          line-height: 26px;
          height: 26px;
          margin-bottom: 10px;
          span {
            vertical-align: top;
          }
          i {
            display: inline-block;
            width: 26px;
            height: 26px;
            margin-right: 6px;
          }
          .el-input-number {
            width: 80px;
          }
        }
        li:first-child i {
          background: url('../../../../../assets/robot/ju.png') no-repeat center center/100% 100%;
        }
        li:nth-child(2) i {
          background: url('../../../../../assets/robot/chong.png') no-repeat center center/100% 100%;
        }
        li:nth-child(3) i {
          background: url('../../../../../assets/robot/zhua.png') no-repeat center center/100% 100%;
        }
        li:nth-child(4) i {
          background: url('../../../../../assets/robot/qi.png') no-repeat center center/100% 100%;
        }
      }
      .fw-btn {
        font-weight: 500;
        font-size: 12px;
        color: #ffffff;
        line-height: 26px;
        i {
          display: inline-block;
          vertical-align: middle;
          width: 26px;
          height: 26px;
          background: url('../../../../../assets/robot/fuw.png') no-repeat center center/100% 100%;
          margin-right: 5px;
        }
      }
    }
    .video-title {
      width: 150px;
      font-weight: 500;
      font-size: 12px;
      color: #ffffff;
      line-height: 24px;
      text-align: center;
      background: linear-gradient(270deg, rgba(29, 212, 231, 0) 0%, #1dd4e7 48%, rgba(29, 212, 231, 0) 100%);
      margin: 0 auto 10px auto;
      margin-bottom: 15px;
    }
    .shangx-btn {
      li {
        border-radius: 2px;
      }
      li:nth-child(2) {
        width: 31px;
        height: 63px;
        background: linear-gradient(180deg, #006f7a 0%, #0ccade 100%);
        border: 1px solid #1dd4e7;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          width: 20px;
          height: 50px;
          background: #b5f8ff;
          border-radius: 4px;
          line-height: 50px;
          font-weight: 500;
          font-size: 12px;
          color: #426687;
          text-align: center;
        }
      }
      li:first-child,
      li:last-child {
        width: 31px;
        height: 25px;
        background: linear-gradient(180deg, #006f7a 0%, #0ccade 100%);
        border: 1px solid #1dd4e7;
        display: flex;
        justify-content: center;
        align-items: center;
        i {
          display: block;
          width: 16px;
          height: 15px;
        }
      }
      li:first-child i {
        background: url('../../../../../assets/robot/shangj.png') no-repeat center center/100% 100%;
      }
      li:last-child i {
        background: url('../../../../../assets/robot/xiaj.png') no-repeat center center/100% 100%;
      }
    }
    .juf-btn {
      padding: 0 12px 14px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid;
      border-image: linear-gradient(270deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.7)) 1 1;
      margin-bottom: 15px;
      .juf-caoz {
        li {
          font-weight: 500;
          font-size: 12px;
          color: #ffffff;
          line-height: 26px;
          i {
            display: inline-block;
            width: 26px;
            height: 26px;
            margin-right: 5px;
            vertical-align: middle;
          }
        }
        li + li {
          margin-top: 10px;
        }
        li:first-child i {
          background: url('../../../../../assets/robot/fuw.png') no-repeat center center/100% 100%;
        }
        li:last-child i {
          background: url('../../../../../assets/robot/stop.png') no-repeat center center/100% 100%;
        }
      }
    }
    .device-btn {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        margin-bottom: 9px;
        font-weight: 500;
        font-size: 12px;
        color: #ffffff;
        line-height: 20px;
        text-align: right;
        width: 33.3%;
        .el-switch {
          margin-left: 4px;
        }
      }
      li:nth-child(3n + 1) {
        text-align: left;
      }
    }
  }
</style>
